<template>
  <el-menu
    active-text-color="#ffd04b"
    class="el-menu-vertical-demo"
    default-active="2"
    router
    unique-opened
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    background-color="#001529"
    text-color="#fafafa"
  >
    <el-sub-menu :index="item._id" v-for="item in routerList" :key="item._id">
      <template #title>
     
        <!-- <el-icon><CirclePlus /></el-icon> -->
        
        <el-icon > <component :is=" item.meta.icon"></component> </el-icon>

        <span class="name">{{ item.name }}</span>
      </template>

      <template v-if="item.children && item.children.length != 0">
        <el-menu-item-group v-for="item1 in item.children" :key="item1._id">
          <el-menu-item :index="item1.url">{{ item1.name }}</el-menu-item>
        </el-menu-item-group>
      </template>
    </el-sub-menu>
  </el-menu>
</template>
  
  <script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useCounterStore } from "../stores/counter";
import IconCommunity from "./icons/IconCommunity.vue";

import server from "../http/index";
import { ref, onMounted, reactive } from "vue";
interface routerInfo {
   url: string, //路径
  name: string,   //名称
  icon: string,    //图标
  meta:object,
  component: string,  //组件
  sort: number,  //排序
}
const routerList = ref([]);

onMounted(() => {
  routerList.value=sessionStorage.getItem("routerList")?JSON.parse(sessionStorage.getItem("routerList")):[];
});
const { isCollapse } = storeToRefs(useCounterStore());

// const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
  
  <style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu ::v-deep {
  width: 100%;
  min-height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 100vh;
  border-right: 0px solid #001529;
}
</style>
  